import React, {useState, useEffect} from 'react';
import {Button, Divider, message, Table, Modal} from 'antd';
import {ColumnsType} from "antd/lib/table";
import styles from './index.module.scss';
import {IPageResponse, IParam} from "@/common/common";
import {apiGetLoginLogList, removeLoginLog} from "@/apis/log";
import {ExclamationCircleOutlined} from '@ant-design/icons';

const {confirm} = Modal;

const TableList: React.FC<any> = () => {

  const [loading, setLoading] = useState<boolean>(false);
  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<IPageResponse<any>>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    apiGetLoginLogList({}, true).then(res => {
      setPageResponse(res);
    }).finally(() => setLoading(false));
  }, [params]);

  const columns: ColumnsType<any> = [
    {
      title: '用户名',
      key: 'userName',
      dataIndex: 'userName',
      align: "center",
    },
    {
      title: 'IP地址',
      key: 'ip',
      dataIndex: 'ip',
      align: "center",
    },
    {
      title: '登录状态',
      key: 'status',
      dataIndex: 'status',
      align: "center",
    },
    {
      title: '创建时间',
      key: 'createAt',
      dataIndex: 'createAt',
      align: "center",
    },
    {
      title: '操作',
      key: 'option',
      dataIndex: 'option',
      align: "center",
      render: (value: any, record: any) => (
        <>
          <Button
            type="primary"
            danger
            size="small"
            onClick={() => {
              showDeleteConfirm([record.id]);
            }}
          >
            删除
          </Button>
        </>
      )
    },
  ]

  const showDeleteConfirm = (ids: number[]) => {
    confirm({
      title: '是否删除记录?',
      icon: <ExclamationCircleOutlined/>,
      content: '删除的记录不能恢复,请确认!',
      onOk() {

      },
      onCancel() {
      },
    });
  }

  return (
    <Table
      rowKey={"id"}
      columns={columns}
      className={styles.container}
      dataSource={pageResponse.data || []}
      pagination={{
        current: pageResponse.pageInfo.page || 0,
        pageSize: pageResponse.pageInfo.size || 10,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "30"],
        total: pageResponse.pageInfo.total || 0,
        showTotal: (total) => `共 ${total} 条`,
        onChange: (pageNo, pageSize) => {
          setParams({...params, ...{page: pageNo, size: pageSize}})
        }
      }}
    />
  )
}

export default TableList
